<?php ob_start();?>
<html>
<?php 
	$root = $_SERVER['DOCUMENT_ROOT'];
 	include($root.'/standart/head.php');
 	include($root.'/standart/dateHeader.php');
 	include($root.'/standart/checkUser.php');
?>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Start Bootstrap - SB Admin Version 2.0 Demo</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../css/sb-admin.css" rel="stylesheet">
    <link href="../css/tinyBox.css" rel="stylesheet" type="text/css" media="screen"/>
    <link href="../css/jquery-ui-1.10.4.css" rel="stylesheet" type="text/css" media="screen"/>
	<link href="../css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <style type="text/css">
    	#icons{
    		float: right; 
    		cursor: pointer; 
    		opacity: 0.3;
    		margin-left: 15px;
    	}
    	#icons:HOVER{
    		float: right; 
    		cursor: pointer; 
    		opacity: 1;
    		margin-left: 15px;
    	}
    </style>
    <script type="text/javascript">
	var divAcceptable = true;
    
    function deleteItem(deletedItem) {
    	if(!divAcceptable){
        	alert('Kayıt işlemini gerçekleştiriniz!');
			return;
		}
    	bootbox.confirm("Silmek için OK butonuna basınız", function(result) {
    		var id = deletedItem.id;
    		while(deletedItem.childNodes.length > 0){
    			deletedItem.removeChild(deletedItem.childNodes[0]);
    		}
    		$('#'+id).removeClass("panel-heading");
    		$('#'+id).animate({
    			height: "0px"
    		}, 500 , function() {
    			var order = deletedItem.getAttribute('order');
    			str = 'setCategory.php?DELETE=1&ID='+id+'&ORDER='+order;
    			ajx(str, 'endDbOp');
    			deletedItem.style.display = 'none';
    			var parent = deletedItem.parentNode;
    	    	var i = 0;
    	    	var changeOrder = false;
    			while(parent.childNodes.length > i){
    				var element = parent.childNodes[i]
    				if(element.tagName == "DIV"){
    					if(parent.childNodes[i].getAttribute('order') > order){
    						parent.childNodes[i].setAttribute('order', parent.childNodes[i].getAttribute('order') - 1)
    					}
    					if(parent.childNodes[i] == deletedItem){
    						parent.removeChild(parent.childNodes[i]);
    						i = i - 1
    					}
    				}
    				i = i + 1;
    			}
    		});
    	}); 
	}

    function endDbOp(_htm){
		if(_htm != null && _htm.trim() != '' && _htm.indexOf('hata') > 0){
			alert(_htm);
			window.location.reload(true);
		}else if(_htm != null && _htm.trim() != ''){
			window.location.reload(true);
		}
    }

    function moveAbove(selectedItem){
    	if(!divAcceptable){
    		alert('Kayıt işlemini gerçekleştiriniz!');
			return;
		}
    	var id = selectedItem.id;
    	if(selectedItem.getAttribute('order') == '1'){
			return;
        }
    	var parent = selectedItem.parentNode;
    	var itemIndex = 0;
    	var i = 0;
		while(parent.childNodes.length > i){
			var element = parent.childNodes[i]
			if(element.tagName == "DIV"){
				itemIndex = itemIndex + 1;
				if(parent.childNodes[i] == selectedItem){
					break;
				}
			}
			i = i + 1;
		}
		str = 'setCategory.php?ID='+id+'&B_ID='+parent.children[itemIndex-2].id;
		ajx(str, 'endDbOp');
		selectedItem.setAttribute('order', selectedItem.getAttribute('order') - 1);
		parent.children[itemIndex-2].setAttribute('order', parseInt(parent.children[itemIndex-2].getAttribute('order')) + 1);

		$('#'+id).removeClass("panel-heading");
		$('#'+id).animate({
			height: "0px"
		}, 1000 , function() {
			parent.removeChild(selectedItem);
			parent.insertBefore(selectedItem, parent.children[itemIndex-2]);
			$('#'+id).addClass("panel-heading");
			$('#'+id).animate({
				height: "40px"
			}, 1000);
		});
		
    }

    function createDiv(order){
    	var iDiv = document.createElement('div');
    	iDiv.id = 'createNew';
    	iDiv.className = 'panel-heading';

    	var inDiv1 = document.createElement('div');
    	inDiv1.className = 'row';

    	
    	var inDiv2 = document.createElement('div');
    	inDiv1.className = 'col-lg-6';

    	inDiv1.appendChild(inDiv2);
    	
    	var input = document.createElement('input');
    	input.className = 'form-control';
    	input.id = 'createName';
    	input.type = 'text';
    	input.setAttribute("order", parseInt(order)+1);

    	inDiv2.appendChild(input);

    	var buton = document.createElement('button');
    	buton.className = 'btn btn-default';
    	buton.onClick = 'createCategory()';
    	buton.type = 'button';
    	buton.innerHTML = 'Kaydet';

    	buton.onclick = function(){
			createCategory();
    	}

    	var buton2 = document.createElement('button');
    	buton2.className = 'btn btn-default';
    	buton2.type = 'button';
    	buton2.innerHTML = 'Vazgeç';

    	buton2.onclick = function(){
			deleteCategory();
    	}

    	iDiv.appendChild(inDiv1);
    	iDiv.appendChild(buton);
    	iDiv.appendChild(buton2);
    	return iDiv;
    }

    function createCategory(){
        parent.loadPageX();
        item = document.getElementById("createName");
    	str = 'setCategory.php?NAME='+item.value+'&ORDER='+item.getAttribute("order");
		ajx(str, 'endDbOp');
    }

	function deleteCategory(){
		doc = document.getElementById("createNew");
		doc.parentNode.removeChild(doc);
		divAcceptable = true;
	}
    
    function insertBelow(selectedItem){
		if(!divAcceptable){
			alert('Kayıt işlemini gerçekleştiriniz!');
			return;
		}
    	var parent = selectedItem.parentNode;
    	var isSelected = false;
    	var i = 0;
    	while(parent.childNodes.length > i){
			var element = parent.childNodes[i]
			if(element.tagName == "DIV"){
				if(isSelected){
					break;
				}
				if(parent.childNodes[i] == selectedItem){
					isSelected = true;
				}
			}
			i = i + 1;
		}
    	parent.insertBefore(createDiv(selectedItem.getAttribute('order')), parent.childNodes[i]);
    	divAcceptable = false;
    }

    function loadPage() {
		parent.unloadPageX();
	}
    </script>
</head>

<body onload="loadPage()">
    <div id="wrapper">
        <div id="inner-page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Kategori Bilgileri</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-4">
                    <div class="panel panel-default">
                        <?php 
                        $db = connect();
                        $stmt ="SELECT CATEGORY_NAME, CATEGORY_ORDER, ID
									FROM CATEGORY
									ORDER BY CATEGORY_ORDER";
                        $res = $db->query($stmt) or die($stmt."<br/><br/>".mysql_error());
						while($row = $res->fetch_assoc()){
                        ?>
                        <div class="panel-heading" id="<?php echo $row['ID']?>" style="height: 40px;" order="<?php echo $row['CATEGORY_ORDER']?>">
                            <?php echo $row['CATEGORY_NAME']?>
                            <div class="fa fa-level-down fa-fw" id="icons" onclick="insertBelow(this.parentNode)" title="yeni Kategori ekle"></div>
                            <div class="fa fa-trash-o fa-fw" id="icons" onclick="deleteItem(this.parentNode)" title="sil"></div>
                            <div class="fa fa-arrow-up fa-fw" id="icons" title="yukarı taşı" onclick="moveAbove(this.parentNode)"></div>
                        </div>
                        <?php }
                        $res->close();
                        disconnect($db);
                        ?>
                    </div>
                    <!-- /.panel -->
                </div>
            </div>
        </div>
        <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->
    <!-- Core Scripts - Include with every page -->
    <!-- Page-Level Demo Scripts - Forms - Use for reference -->
</body>
    <script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="../js/ajax.js"></script>
    <script type="text/javascript" src="../js/tinybox.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/bootbox.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.10.4.js"></script>
    <script type="text/javascript" src="../js/plugins/dataTables/jquery.dataTables.js"></script>
    <script type="text/javascript" src="../js/plugins/dataTables/dataTables.bootstrap.js"></script>
</html>
<?php ob_end_flush(); ?>